<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	#test_1{
		border:1px solid black;
		width: 200px;
		height: 120px;
		text-align: center;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../jqueryLib/jquery.easing.1.3.js"></script>
<script>
	$(document).ready(function(){
		$("#in").click(function(){
			$("#test_1").fadeIn(3000,"easeInCubic");
		});
		
		$("#out").click(function(){
			$("#test_1").fadeOut(3000,"easeOutCubic");
		});
		$("#toggle").click(function(){
			$("#test_1").fadeToggle(3000,"easeInCubic");
		})
	});
</script>
</head>
<body>
<div  id="test_1">
	<img id="img1" src="../images/ch2.png">
</div>
<div>
	<button id="in">fade in</button>
	<button id="out">fade out</button>
	<button id="toggle">toggle</button>
</div>

</body>
</html>